<template>
	<div id="ElementManage" class="ElementManage">
		<div v-transfer-dom>
			<confirm v-model="show"
			         :title="confirmTitle"
			         @on-cancel="onCancel"
			         @on-confirm="onConfirm">
				<p style="text-align:center;"><span v-html="message"></span></p>
			</confirm>
		</div>
		<grid class="gridTitle" :show-vertical-dividers="false">
			<grid-item>
				<span class="grid-center">顺序</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">类型</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">类型说明</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">操作</span>
			</grid-item>
		</grid>
		<grid class="gridCell" v-for="(item, index) in items" :show-vertical-dividers="false">
			<grid-item class="grid-item" @click.native="swapUp(index)">
				<span class="grid-center-link" v-if="index == 0"><x-icon type="ios-minus-empty" size="13"></x-icon></span>
				<span class="grid-center-link" v-else><x-icon type="ios-arrow-thin-up" size="13"></x-icon></span>
			</grid-item>
			<grid-item class="grid-item" @click.native="onUpdate(item.id)">
				<span class="grid-center-link">{{items[index].value}}</span>
			</grid-item>
			<grid-item class="grid-item">
				<span class="grid-center">{{items[index].value_description}}</span>
			</grid-item>
			<grid-item class="grid-item" @click.native="onClickDelete(index, item)">
				<span class="grid-center-link"><x-icon type="ios-close-outline" size="13"></x-icon></span>
			</grid-item>
		</grid>
	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import NetWorking from '../../../utils/networking'
	import {Swipeout, SwipeoutItem, SwipeoutButton, Cell, XButton, TransferDomDirective as TransferDom, Confirm, Popup, Group, XInput, Flexbox, FlexboxItem, Grid, GridItem} from 'vux'
	const GET_URL = 'list_of_value/getListOfValueByType'
	const URL = 'list_of_value'
	const TYPE = 'S_LOV_LESSON'
	export default {
		name: "lessons-manage",
		components: {
			Swipeout,
			SwipeoutItem,
			SwipeoutButton,
			Cell,
			XButton,
			TransferDom,
			Confirm,
			Popup,
			Group,
			XInput,
			Flexbox,
			FlexboxItem,
			Grid,
			GridItem
		},
		directives: {
			TransferDom
		},
		data() {
			return {
				templateTitle: this.$route.params.templateTitle,
				templateType: this.$route.params.templateType,
				newComp: this.$route.params.newComp,
				updateComp: this.$route.params.updateComp,
				confirmTitle: '',
				items: [],
				deleteText: '删除',
				show: false,
				showPopup: false,
				title: '操作提示',
				message: '确定要删除吗？',
				curIndex: '',
				curItem: '',
				value: '',
				sequence: ''
			}
		},
		beforeRouteLeave(to, from, next){

			//存储当前页面信息
			this.$store.commit('CREATE_URL_PARAMS', {name: from.name, params: {templateTitle: this.templateTitle, templateType: this.templateType, newComp: this.newComp}})
			next()
		},
		created: function () {
			if(this.templateTitle == null && this.templateType == null){
				//如果没有参数的情况下，尝试从存储里面取
				this.$store.commit('FETCH_URL_PARAMS')
				if(this.$store.state.user.urlParamsMap != null && this.$store.state.user.urlParamsMap["elementManage"] != null){
					let params = this.$store.state.user.urlParamsMap["elementManage"].params
					if(params.templateTitle != null && params.templateType != null && params.newComp != null){
						this.templateTitle = params.templateTitle
						this.templateType = params.templateType
						this.newComp = params.newComp
					}
				}
			}

			bus.$emit("barController", 3)
			bus.$emit("setTopSimpleWithNewTitle", this.templateTitle)
			bus.$emit("setNewCompDetails", this.newComp)
			bus.$emit("setNewCompParams", this.templateType)

			this.loadData()

		},
		methods: {
			onUpdate(id) {
				if(this.updateComp != null){
					this.$router.push({ name: this.updateComp, params: { id: id, title: this.templateTitle}})
				}else{
					this.$router.push({ name: "elementUpdate", params: { id: id, title: this.templateTitle}})
				}
			},
			loadData() {
				let _this = this
				NetWorking.doGet(
					GET_URL,
					null,
					{
						params:{
							"type": this.templateType
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.items = rs.list_of_value
						}else{
							alert("rs.error_message")
						}
					}
				)
			},
			onCancel () {
				console.log('on cancel')
			},
			onConfirm () {
				this.deleteElement()
			},
			onClickDelete(index, item) {
				this.show = true
				this.curIndex = index
				this.curItem = item
				this.message = '确定要删除' + this.curItem.value + '吗？'
			},
			deleteElement () {
				let _this = this
				NetWorking.doDelete(
					URL,
					null,
					{
						params: {
							id: this.curItem.id
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.items.splice(this.curIndex, 1)
						}else{
							alert(rs.error_message)
						}
					}
				)
			},
			newElement() {
				this.showPopup = true
				//this.$router.push({ name: 'newElement'})
			},
			cancel: function () {
				this.showPopup = false
			},
			swapUp: function (index) {
				if(index > 0){
					NetWorking.doPost(
						'list_of_value/swapItems',
						null,
						null,
						{
							params: {
								item1: JSON.stringify(this.items[index]),
								item2: JSON.stringify(this.items[index - 1])
							}
						}
					).then(
						response => {
							let rs = response.data
							if(rs.error_code == 0) {
								this.loadData()
							}else{
								alert(rs.error_message)
							}
						}
					)
					//cmnutils.swapArray(this.items,index,index-1)
				}
			},
			confirm: function () {
				NetWorking.doPost(
					URL,
					null,
					{
						type: this.templateType,
						value: this.value,
						sequence: this.sequence
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							this.showPopup = false
							this.value = ''
							this.sequence = ''
							this.loadData()
						}else{
							alert(rs.error_message)
						}
					}
				)
			}
		}
	}
</script>

<style>
	.ElementManage {
		margin-top: 46px;
		margin-bottom: 80px;
	}

	.newElementBtn {
		margin-top: 0px !important;
		text-align: right;
		margin-right: 12px;
	}

	.newElementTitle {
		font-size: 22px;
		font-weight: bold;
		float: left;
		margin-left: 12px;
	}

	.newBtn {
		color: white !important;
		background-color: #efae1b !important;
		margin-bottom: 12px;
	}

	.swipeList{

	}

	.swipeListCell{
		padding: 0px 15px !important;
		border-bottom: 0.5px solid gray;
		font-size: 14px;
	}
</style>